<template>
  <view class="tui-divider" :style="{ height: height + 'rpx' }">
    <view class="tui-divider-line" :style="{ width: width, background: getBgColor(gradual, gradualColor, dividerColor) }" />
    <view
      class="tui-divider-text"
      :style="{ color: color, fontSize: size + 'rpx', lineHeight: size + 'rpx', backgroundColor: backgroundColor, fontWeight: bold ? 'bold' : 'normal' }"
    >
      <slot />
    </view>
  </view>
</template>

<script>
import colors from '@/common/colors'
export default {
  name: 'TuiDivider',
  props: {
    // divider占据高度
    height: {
      type: Number,
      default: 100
    },
    // divider宽度，可填写具体长度，如400rpx
    width: {
      type: String,
      default: '100%'
    },
    // divider颜色，如果为渐变线条，此属性失效
    dividerColor: {
      type: String,
      default: colors.colorBorder
    },
    // 文字颜色
    color: {
      type: String,
      default: colors.fontcolorT3
    },
    // 文字大小 rpx
    size: {
      type: Number,
      default: 24
    },
    bold: {
      type: Boolean,
      default: false
    },
    // 背景颜色，和当前页面背景色保持一致
    backgroundColor: {
      type: String,
      default: colors.colorBackground
    },
    // 是否为渐变线条，为true，divideColor失效
    gradual: {
      type: Boolean,
      default: false
    },
    // 渐变色值，to right ，提供两个色值即可，由浅至深
    gradualColor: {
      type: Array,
      default: function() {
        return ['#eee', '#ccc']
      }
    }
  },
  methods: {
    getBgColor: function(gradual, gradualColor, dividerColor) {
      let bgColor = dividerColor
      if (gradual) {
        bgColor = 'linear-gradient(to right,' + gradualColor[0] + ',' + gradualColor[1] + ',' + gradualColor[1] + ',' + gradualColor[0] + ')'
      }
      return bgColor
    }
  }
}
</script>

<style scoped>
.tui-divider {
	width: 100%;
	position: relative;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	overflow: hidden;
}

.tui-divider-line {
	position: absolute;
	height: 1rpx;
	top: 50%;
	left: 50%;
	-webkit-transform: scaleY(0.5) translateX(-50%) translateZ(0);
	transform: scaleY(0.5) translateX(-50%) translateZ(0);
}

.tui-divider-text {
	position: relative;
	text-align: center;
	padding: 0 18rpx;
	z-index: 1;
}
</style>
